<template>
<!-- 办事指南 -->
  <div class="infor">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"    left-arrow @click-left="onClickLeft"/>
    <div class="form">
      <!-- <form action=""> -->
        <!-- 姓 名 -->
        <div class='enroll-item'>
          <div class='item-title'>姓 名</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入姓名'  v-model="name">
        </div>
        <!-- 姓 别 -->
        <div class='enroll-item'>
          <div class='item-title'>性 别</div>
          <div class='item-xing'>*</div>
          <van-radio-group v-model="radio" class="radio">
            <van-radio name="1" class="namn" checked-color="#D33043">男</van-radio>
            <van-radio name="2" class="woman " checked-color="#D33043">女</van-radio>
          </van-radio-group>
        </div>
        <!-- 出生年月 -->
        
        <div class='enroll-item' @click="showpopup">
          <div class='item-title'>出生年月</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请选择'  v-model="data" disabled="disabled">
        </div>
        <!-- 移动电话 -->
        <div class='enroll-item'>
          <div class='item-title'>移动电话</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入电话'  :value="phone"  @change="change" @input="change">
        </div>
        <!-- 居住地址 -->
        <div class='enroll-item'>
          <div class='item-title'>小区</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入地址'  v-model="address">
        </div>
        <!-- 报名课程 -->
        <div class='enroll-item phon'>
          <div class='item-title'>报名课程</div>
          <div class='item-xing'>*</div>
          <input class='item-content' type='text' placeholder='请输入课程'  v-model="course">
        </div>

        <!-- 提交反馈 -->
        <div class="feedback">
            <textarea v-model="remarks" placeholder="备注" class="feed-input" ></textarea>
        </div>
      <!-- </form> -->
      <button class="inforBtn" @click="inforBtn">我要报名</button>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker   title="请选择出生年月"
          v-model="currentDate" 
          type="date" 
          :formatter="formatter"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          :min-date="minDate"
          :max-date="maxDate"
        />
    </van-popup> 
  </div>
</template>

 <script>
 import apiHttp from '../../../../../api/index'
 import { Toast } from 'vant';
  export default {
    data(){
      return{
        id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
        userId:sessionStorage.getItem('userId'),
        radio: '1',
        header:"我要报名",
        remarks:"",  // 备注
        name:"",     // 姓名
        oldNum: '' ,    // 电话
        address:"",  // 地址
        course:"",   // 课程
        data:"",      // 出生
        show: false,
        currentDate: new Date(),
        message:"请选择出生年月",
        minDate:new Date(1920, 1, 1),
        maxDate: new Date(),
      }
    },
    computed: {
      phone () {return this.oldNum}
    },
    methods:{
      showpopup(){
        if(!this.show){
            this.show = true;
        }else{
            this.show = false;
        }
      },
    formatter(type, value) {
    　　if (type === 'year') {
      　　return `${value}年`;
    　　} else if (type === 'month') {
    　　  return `${value}月`
    　　} else if (type === 'day') {
      　　return `${value}日`
    　　} 
    　　return value;
  　　},
      onChange(picker,value,index){
         var d = new Date(this.currentDate)
         this.data = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      },
      onCancel(){
        this.show = false
      },
      onConfirm(){
        this.show = false
      },
      onClickLeft() {  // 点击返回按钮
        this.$router.go(-1);
      },
      change (event) {
        let val = event.target.value.trim()
        if (/^[1-9]\d*$|^$/.test(val)) {
            this.oldNum = val
        } else {
            event.target.value = this.oldNum
        }
      },
      // 我要报名
      inforBtn(){
        var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if(this.name ==""){
          Toast("请输入用户名");
        }else if(this.data ==""){
          Toast("请选择出生日期");
        }else if(this.phone =="" ){
          Toast("手机号不能为空");
        }else if(!reg.test(this.phone)){
          Toast("手机号格式错误请重新输入");
        }else if(this.address ==""){
          Toast("请输入地址");
        }else if(this.course ==""){
          Toast("请输入课程");
        }else{
          let params ={
          userId:this.userId,
          commId:this.id,
          olderSex:this.radio,
          olderBirth:this.data,
          olderName:this.name,
          olderPhone:this.phone,
          olderAddress:this.address,
          olderCourse:this.course,
          remarks:this.remarks
        }
          apiHttp.comIndex.addOlder(params,resp=>{
            console.log(resp)
          if(resp.resultCode == '000000'){
            this.$router.push({path:"./thearSuce",query:{olderId:resp.data.olderId}});
            }else{
              Toast(resp.data.resultMsg)
            }
          })
        }
      }
    },
    mounted(){
      var u = navigator.userAgent, app = navigator.appVersion
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        $(document).ready(function(){
          $("input").blur(function(){
            if (isIOS) {
              blurAdjust()
            }
          });
        });
        // 解决苹果不回弹页面
        function blurAdjust(e){
          setTimeout(()=>{
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
              return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                result = 'android'
            }
            
            if( result = 'ios' ){
              document.activeElement.scrollIntoViewIfNeeded(true);
            }
          },100)
        }
    }
  }
 </script>
 <style scoped>
 input::-webkit-input-placeholder{
    color: #ccc;
}
   .radio{
      width: 100%;
      display: flex;
      margin-left: 48%;
    }
    .van-radio{
      margin: 0 8px;
    }
   .form{
     width: 92%;
     margin: 0 auto;
     background-color:#fff;
     font-size: 0.6rem;
     margin-top: 0.4rem;
   }
   .enroll-item {
    display: flex;
    flex-direction: row;
    padding: 0 0.5rem;
    height: 2rem;
    flex-wrap: nowrap;
    align-items: center;
     /* width: 92%; */
     margin: 0 auto;
    border-bottom: 1px solid #D8D8D8;
  }
  .enroll-item input{
    background-color: #ffffff;
    color: #666666;
  }
  .phon{
     border-bottom: 0px;
  }
  .item-title {
    font-size: 30rpx;
    color: #000000;
    white-space: nowrap;
  }

  .item-xing {
    color: #fc6262;
    margin-top: 0.3rem;
  }

  .item-content {
    margin-left: 1rem;
    color: #000;
    flex: 1;
    text-align: right;
    
  }
  input{
    border:none;
  }
  .inforBtn{
    bottom: 1rem;
    position: fixed;
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius: 6px;
    background-color: #D33043;
    color: #FFFFFF;
    font-size: 0.8rem;
  }
   .feed-input{
      width:100%;
      background-color:#ffffff;
      font-size: 0.7rem;
      color:#000;
      padding: 0.3rem;
      height: 5rem;
      border-radius:4px;
      border:none;
      color: #8a8a8a;
      
   }
   .feedback{
      border-top: 5px solid #F5F5F5;
   }
 </style>
